<template>
  <div>
    <table class="table table-sm table-bordered table-vertical-middle approve-table">
      <colgroup>
        <col width="20%" />
        <col width="30%" />
        <col width="20%" />
        <col width="30%" />
      </colgroup>
      <tr>
        <td>项目名称</td>
        <td>{{ relatedData.customer_name }}</td>
        <td>负责人</td>
        <td>{{ relatedData.corp_name }}</td>
      </tr>
      <tr>
        <td>申请金额</td>
        <td>{{ relatedData.apply_funds }} 万元</td>
        <td>申请期限</td>
        <td>{{ relatedData.load_years }} 年</td>
      </tr>
      <tr>
        <td>开函时间</td>
        <td :class="tdClass">
          <span v-if="isView">
            {{ formData.sign_date }}
          </span>
          <el-date-picker
            v-else
            type="date"
            class="w-100"
            value-format="yyyy年MM月dd日"
            placeholder="开函时间"
            v-model="editData.sign_date"
          ></el-date-picker>
        </td>
        <td>银行名称</td>
        <td :class="tdClass">
          <span v-if="isView">
            {{ formData.bank_name }}
          </span>
          <el-input v-else placeholder="银行名称" v-model="editData.bank_name"></el-input>
        </td>
      </tr>
    </table>

    <approve-common
      v-if="tableId"
      v-bind="$attrs"
      :view-mode="viewMode"
      :related-data="relatedData"
      :approve-data="approveData"
      :before-save="submit"
      @success="handleSuccess"
    ></approve-common>
    <div class="text-center my-3" v-else-if="!isView">
      <el-button class="btn-long" type="primary" :loading="saveLoading" @click="submit">
        保存
      </el-button>

      <el-button class="btn-long" @click="beforClose">取消</el-button>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import ApproveCommon from '@/credit/views/county/settle/bond/component/refund/ApproveCommon'
export default {
  components: {
    ApproveCommon,
  },
  props: {
    queryId: String,
    viewMode: {
      type: Boolean,
      default: false,
    },
    approveData: {
      type: Object,
      default: () => ({
        editable: false,
        record: [],
      }),
    },
    formData: {
      type: Object,
      default: () => ({}),
    },
    relatedData: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      saveLoading: false,
      dateFor: 'yyyy-MM-dd',
      editData: {
        sign_date: '',
        bank_name: '',
      },
      tableName: 'ele_letter',
    }
  },
  computed: {
    ...mapGetters(['clientId', 'org', 'user']),
    orgName() {
      return this.org.orgName || '-'
    },
    tdClass() {
      return this.isView ? '' : 'report-input-td'
    },
    isView() {
      return this.viewMode
    },
    tableId() {
      return this.formData.ele_letter_id || ''
    },
  },
  watch: {
    formData: {
      handler: function () {
        Object.keys(this.editData).forEach(key => {
          this.editData[key] = this.formData[key] || ''
        })
      },
      immediate: true,
      deep: true,
    },
  },
  created() {},
  mounted() {},
  methods: {
    handleSuccess(res) {
      this.$emit('success', res)
    },
    submit() {
      if (!this.editData.sign_date) {
        return this.$message.warning('请选择开函时间')
      }
      if (!this.editData.bank_name) {
        return this.$message.warning('请输入银行名称')
      }
      const data = {
        customer_related_id: this.relatedData.customer_related_id,
        sign_date: this.editData.sign_date,
        bank_name: this.editData.bank_name,
        gua_org_id: this.clientId,
        gua_company: this.orgName,
      }
      if (this.tableId) {
        this.$api
          .updateData(this.$serviceName, this.tableName, this.tableId, data)
          .then(() => {
            if (!this.tableId) {
              this.$emit('success')
              this.$message.success('保存成功')
            }
          })
          .catch(err => {
            this.$message.error(err?.data?.error_description ?? '提交失败，请重试！')
          })
      } else {
        this.$api
          .addData(this.$serviceName, this.tableName, {
            ...data,
            submit_person_name: this.user.realName,
          })
          .then(() => {
            if (!this.tableId) {
              this.$emit('success')
              this.$message.success('保存成功')
            }
          })
          .catch(err => {
            this.$message.error(err?.data?.error_description ?? '提交失败，请重试！')
          })
      }
    },
    beforClose() {
      this.$emit('dismiss')
    },
  },
}
</script>

<style lang="scss" scoped>
.approve-table {
  text-align: center;
  margin-bottom: 0;
  margin-top: -1px;
  td {
    vertical-align: middle;
  }
}
.file-item {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px dotted #eee;

  &:last-child {
    border-bottom: none;
  }
}
</style>
